<template>
  <div>
    <TableHead />
    <a-table
      v-model:selected-keys="keys"
      :row-key="table.rowKey"
      :row-selection="{
        selectedRowKeys: keys
      }"
      :loading="table.loading"
      :data="table.data"
      :bordered="false"
      class="table-container"
      :columns="translateColumns(columns.columns)"
      :pagination="{
        current: query.pageNum,
        total: query.total,
        pageSize: query.pageSize
      }"
      @page-size-change="pageSizeChange"
      @page-change="pageChange"
    >
      <template #operation="{ record }">
        <div class="flex gap-2 justify-center">
          <a-dropdown-button size="mini" @click="edit(record)">
            <IconEdit />

            <template #content>
              <a-doption @click="del(record[table.rowKey])">
                <template #icon>
                  <IconDelete />
                </template>
                {{ t["删除"] }}
              </a-doption>
            </template>
          </a-dropdown-button>
        </div>
      </template>
      <template #type="{ record }">
        {{
          getOptionLabel({
            options: publishTypeOption,
            value: record.timeType
          })
        }}
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { getOptionLabel } from "@/utils/form";

import columns from "../data/column";
import { del, edit, list } from "../data/curd";
import { publishTypeOption } from "../data/options";
import { keys, query, table } from "../data/table";
import TableHead from "./TableHead.vue";

const t = translate("公共模块");

onMounted(async () => {
  await list();
});

const pageChange = (page: number) => {
  query.value.pageNum = page;
  list();
};
const pageSizeChange = (pageSize: number) => {
  query.value.pageNum = pageSize;
  list();
};
</script>

<style lang="scss" scoped></style>
